<template>
	<view>
		<view class="container u-skeleton">
			<view class="header"></view>
			<Head class="head" />
			<text class="header-timer u-skeleton-rect">{{ $u.timeFormat(timestamp, 'mm月dd日') }}&emsp; {{ getWeekDate() }}</text>
			<text class="header-title u-skeleton-rect">今日推荐</text>
			<view class="banner u-skeleton-fillet">
				<u-swiper :list="topicBanner" duration="300" @click="bannerTap" :title="true" height="800"></u-swiper>
			</view>
			<text class="hot-subTitle u-skeleton-rect">{{ topicData.hot.columnTitle }}</text>
			<view class="hot u-skeleton-fillet" hover-class="touch" hover-start-time="0" hover-stay-time="300" @tap="itemTap(topicData.hot)">
				<ImageLoad :src="topicData.hot.backgroundUrl" borderRadius="30" />
				<view class="text">
					<text v-for="(item, index) in hotTitle" :key="index">{{ item }}</text>
				</view>
			</view>
			<view v-for="(column, columnIndex) in topicData.column" :key="columnIndex">
				<view class="column-title u-skeleton-rect">
					{{ column.columnTitle }}
					<image v-if="column.items.length > 4" @tap="changeColumn(columnIndex)" src="../../static/topic/change.png" mode="widthFix"></image>
				</view>
				<view class="column-container">
					<view
						class="column u-skeleton-fillet"
						hover-class="touch"
						hover-start-time="0"
						hover-stay-time="300"
						@tap="itemTap(item)"
						v-for="(item, index) in column.randomColumn"
						:key="index"
					>
						<view class="image" v-if="column.columnIsShow"><ImageLoad :src="item.backgroundUrl" borderRadius="30" /></view>
						<text class="title" v-if="column.columnIsShow">{{ item.title }}</text>
					</view>
				</view>
				<u-line color="#DDDDDD" length="680rpx" margin="0rpx 35rpx" />
			</view>
		</view>
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
import { log } from 'util'
import Head from '../../components/head/head.vue'
export default {
	data() {
		return {
			loading: true,
			timestamp: Date.parse(new Date()),
			topicData: {
				banner: [],
				hot: {},
				column: [],
			},
		}
	},
	components: {
		Head,
	},
	onLoad() {
		this.loadData()
	},
	onShow() {
		if (getApp().globalData.topicLoadData) {
			this.loadData()
			getApp().globalData.topicLoadData = false
		}
	},
	computed: {
		hotTitle() {
			return this.topicData.hot.title ? this.topicData.hot.title.split('：') : ''
		},
		topicBanner() {
			return this.topicData.banner.map((item) => {
				return { image: item.backgroundUrl, title: item.title }
			})
		},
	},
	onShareAppMessage() {
		return {
			title: '孩子的认知优势，决定孩子的未来。赶紧测一测吧！',
			path: '/pages/topic/topic',
			imageUrl: '',
		}
	},
	methods: {
		/**
		 * 获取首页热点数据
		 */
		loadData: async function () {
			const [data, err] = await this.awaitWarp(this.$post(this.api.loadTopicData, { deviceUuid: this.deviceUuid }))
			console.log(data)
			//请求错误重新请求
			if (err) {
				uni.showLoading({
					title: '正在加载',
					mask: true,
				})

				return
			}
			uni.hideLoading()
			//数据绑定
			const banner = data.topics.filter((item) => {
				return item.mark === 'recommend1'
			})
			const hot = data.topics.filter((item) => {
				return item.mark === 'recommend2'
			})[0]
			hot.columnTitle = data.markAndProfileMap.recommend2.title
			const column = []
			for (const key in data.markAndProfileMap) {
				const value = data.markAndProfileMap[key]
				if (key !== 'recommend1' && key !== 'recommend2') {
					const list = data.topics.filter((item) => {
						return item.mark === key && item.title.indexOf('???') < 0 && item.id !== 38
					})
					column.push({
						columnTitle: value.title,
						items: list.reverse(),
						randomColumn: [],
						randomCurrent: 0,
						columnIsShow: true,
					})
				}
			}
			this.topicData.column = column
			this.topicData.banner = banner
			this.topicData.hot = hot
			console.log(this.topicData)
			column.map((item, index) => {
				this.changeColumn(index)
			})
			//隐藏骨架屏
			this.loading = false
		},
		/**
		 * 改变列表
		 */
		changeColumn: function (index) {
			const list = []
			const key = this.topicData.column[index]
			for (let i = 0; i < 4; i++) {
				list.push(key.items[key.randomCurrent])
				key.randomCurrent++
				if (key.randomCurrent === key.items.length) {
					if (key.items.length < 4) break
					key.randomCurrent = 0
				}
			}
			key.randomColumn = list
			key.columnIsShow = false
			setTimeout(() => {
				key.columnIsShow = true
			}, 0)
		},
		bannerTap: function (index) {
			console.log(index)
			this.$Router.push({ name: 'topicDetail', query: { item: JSON.stringify(this.topicData.banner[index]) } })
		},
		/**
		 * 热点内容点击 进入热点详情页
		 * @param {map} item
		 */
		itemTap: function (item) {
			this.$Router.push({ name: 'topicDetail', query: { item: JSON.stringify(item) } })
		},
		/**
		 * 获取当前星期几
		 * @return {string} week
		 */
		getWeekDate: function () {
			const now = new Date()
			const day = now.getDay()
			const weeks = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六')
			return weeks[day]
		},
	},
}
</script>
<style scoped lang="stylus">
.container
	width 100vw
	height auto
	min-height 100vh
	display flex
	flex-direction column
	background white

	.header
		width 750rpx
		height 450rpx
		position absolute

	.head
		position absolute
		top 100rpx
		left 50rpx
		z-index 1

	.header-title
		color #303133
		font-weight bold
		font-size 50rpx
		width fit-content
		margin 2rpx 0 0 200rpx

	.header-timer
		color #8F9399
		font-size 35rpx
		font-weight bold
		width fit-content
		margin 7.5vh 0 0 200rpx

	.banner
		background white
		width 680rpx
		height 800rpx
		margin 30rpx auto
		z-index 1
		position relative
		border-radius 30rpx
		overflow hidden
		transform translate3d(0, 0, 0)
		transition all 0.3s
		box-shadow 0 0 50rpx #909399

	.hot-title
		color #FFC34A
		font-size 35rpx
		width fit-content
		margin 20rpx 0 0 40rpx

	.hot-subTitle
		font-size 50rpx
		margin-left 40rpx
		width fit-content
		position relative
		margin-top 10rpx
		z-index 1
		font-weight bold

	.hot
		width 680rpx
		height 800rpx
		margin 20rpx auto
		position relative
		border-radius 30rpx
		transition all 0.3s
		overflow hidden
		transform translate3d(0, 0, 0)
		box-shadow 0 0 50rpx #909399

		.text
			color white
			font-weight bold
			letter-spacing 2rpx
			font-size 40rpx
			line-height 50rpx
			height 120rpx
			width 100%
			position absolute
			left 0
			top 0
			padding 20rpx 0 0 20rpx
			box-sizing border-box
			background linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0))
			display flex
			flex-direction column

	.column-title
		font-size 50rpx
		margin-left 40rpx
		margin-top 20rpx
		width 680rpx
		z-index 1
		font-weight bold
		display flex
		align-items center

		image
			width 150rpx
			height auto
			margin-left auto
			margin-right 10rpx
			border 1rpx solid #FFDEBB
			padding 10rpx 15rpx
			border-radius 28rpx

	.column-container
		width 680rpx
		height auto
		margin 20rpx auto
		display flex
		flex-wrap wrap
		align-content center
		justify-content space-between

		.column
			width 100%
			height 165rpx
			// margin-bottom 20rpx
			background white
			border-radius 20rpx
			// box-shadow 0 0 20rpx #dcdfe6
			display flex
			overflow hidden
			align-items center
			transform translate3d(0, 0, 0)
			transition all 0.3s

			.image
				width 200rpx
				height 140rpx
				border-radius 15rpx
				position relative
				transform translate3d(0, 0, 0)
				overflow hidden
				margin-right 30rpx

			.title
				width 450rpx
				font-size 30rpx
				font-weight bold
				line-height 50rpx
				display -webkit-box
				-webkit-box-orient vertical
				-webkit-line-clamp 2
				overflow hidden
</style>
